<template>
  <FormCard class="manual-relation-form-card" @click="toggleSelect">
    <div style="display: flex; align-items: center; justify-content: center">
      <div style="width: fit-content">
        <ManualRelationFormCardSelection :checked="checked" :selectionType="selectionType"/>
      </div>
      <div style="flex: 1">
        <template v-for="(field, index) in fields">
          <template v-if="index < commonShowCount || showMore">
            <renderFieldColumn :field="field" :index="index"/>
          </template>
        </template>
      </div>
    </div>
    <ManualRelationFormCardBottomButton
        v-if="fields.length >= commonShowCount"
        v-model:showMore="showMore"/>
  </FormCard>
</template>
<script setup>
import FormCard from '@comp/FormEngine/field/Card/FormCard.vue';
import {createProps, getFieldConfigById} from '@/utils';
import {computed, h, shallowRef} from 'vue';
import ManualRelationFormCardBottomButton
  from '@comp/FormEngine/field/relation/RelationFormList/ManualRelationFormCardBottomButton.vue';
import ManualRelationFormCardSelection
  from '@comp/FormEngine/field/relation/RelationFormList/ManualRelationFormCardSelection.vue';
import FieldColumnRegistry from '@comp/FormEngine/field/FieldColumnRegistry';

defineOptions({name: 'ManualRelationFormCard'});

const showMore = shallowRef(false);
const commonShowCount = shallowRef(4)
const props = defineProps({
  item: createProps(Object),
  rowIndex: createProps(Number),
  rowId: createProps(String),
  fields: createProps(Array),
  selectedRows: createProps(Array, () => []),
  selectedRowsKeys: createProps(Array, () => []),
  formDefinition: createProps(Object, () => undefined),
  manualConfig: createProps(Object, () => undefined),
  selectionType: createProps(String, 'radio'),
  idColumnName: createProps(String),
});

const checked = computed(() => {
  return props.selectedRowsKeys.includes(props.rowId);
});

function toggleSelect() {
  if (props.selectionType === 'radio') {
    //单选的逻辑
    if (!checked.value) {
      let list = props.selectedRows
      list.splice(0, list.length);
      props.selectedRows.push(props.item);
    }
  } else {
    //多选的逻辑
    if (checked.value) {
      //已经选中了
      let index = props.selectedRows.findIndex(item => props.rowId === item[props.idColumnName]);
      if (index !== -1) {
        props.selectedRows.splice(index, 1);
      }
    } else {
      //没有选中呢
      props.selectedRows.push(props.item);
    }
  }
}

function renderFieldColumn({field, index}) {
  let fieldConfig = getFieldConfigById(field.fieldId, props.formDefinition);
  if (!fieldConfig) return;
  let columnComponent = FieldColumnRegistry[fieldConfig.component];
  // if (!columnComponent) return h('div', {}, [
  //     field.label
  // ]);
  return h(columnComponent, {
    value: props.item[field.fieldId],
    label: field.label,
    title: props.item[`${field.fieldId}&title`] || props.item[field.fieldId],
    fieldConfig
  });
}
</script>
<style scoped lang="less">
.manual-relation-form-card:active .van-cell,
.manual-relation-form-card:active {
  background: var(--van-button-active-bg);
}
.manual-relation-form-card {
  padding: 20px 10px 0 10px;
  border: 1px solid #e3e5e4;
  box-shadow: 0 0 5px #e3e5e4;
}

.arrow-wrapper {
  text-align: right;
  padding: 10px;

}
</style>